$(function () {


    // ********************************************************加载列表
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer,
            form = layui.form;

        function getList() {
            $.ajax({
                url: '/admin/links',
                success: res => {
                    // console.log(res);
                    // console.log(res.data);
                    $('tbody').html('')
                    $.each(res.data, (index, item) => {
                        let tr = $(`<tr>
                                       <td>${item.id}</td>
                                       <td>
                                         <div class="bg">
                                           <img src="http://127.0.0.1:8888/uploads/${item.linkicon}">
                                         </div>
                                       </td>
                                       <td>${item.linkname}</td>
                                       <td>${item.linkurl}</td>
                                       <td>${item.linkdesc}</td>
                                       <td>
                                         <button type="button" class="layui-btn layui-btn-xs edit" id=${item.id} linkname=${item.linkname} linkurl=${item.linkurl} linkdesc=${item.linkdesc} linkicon=${item.linkicon}>
                                       编辑
                                     </button>
                                         <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete" id=${item.id}>
                                       删除
                                     </button>
                                       </td>
                                     </tr>`)
                        $('tbody').append(tr)

                    })
                }
            })
        }
        getList()

        // *********************************************************删除友情链接
        $("tbody").on("click", ".delete", function () {
            let id = $(this).attr("_id");
            $.ajax({
                url: "/admin/links/" + id,
                type: "DELETE",
                success: function (res) {
                    link()
                }
            });
        })

        // *********************************************************删除友情链接

        $('tbody').on('click', '.delete', function () {
            // e.preventDefault()
            let id = $(this).attr('id')
            $.ajax({
                url: '/admin/links/' + id,
                type: 'DELETE',
                success: res => {
                    layer.confirm('是否要删除？', function (index) {
                        //do something
                        getList()
                        layer.close(index);
                    });
                }
            })
        })




        // **********************************************************编辑友情链接
        let edit_str = `<form id="edit-form" lay-filter='editForm' class="layui-form" style="margin: 15px 30px 0 0">
    <!-- 第一行：密码 -->
    <div class="layui-form-item">
      <label class="layui-form-label">链接名称</label>
      <div class="layui-input-block">
        <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
      </div>
    </div>
    <!-- 第二行：确认密码 -->
    <div class="layui-form-item">
      <label class="layui-form-label">链接地址</label>
      <div class="layui-input-block">
        <input type="text" name="linkurl" required lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
      </div>
    </div>
    <!-- 第三行：链接描述 -->
    <div class="layui-form-item">
      <label class="layui-form-label">链接描述</label>
      <div class="layui-input-block">
        <input type="text" name="linkdesc" required lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
      </div>
    </div>
    <!-- 第四行：上传图片 -->
    <div class="layui-form-item">
      <div class="layui-input-block icon-url">
        <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
          <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <input type="file" id="linkFile" style="display: none;">
        <img id="preIcon" src="">
      </div>
    </div>
    <!-- 第三行：按钮 -->
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>`;




        $("tbody").on("click", ".edit", function (e) {
            e.preventDefault()

            let linkname = $(this).attr("linkname");
            let linkurl = $(this).attr("linkurl");
            let linkdesc = $(this).attr("linkdesc");
            let id = $(this).attr("id");

            let index = layer.open({
                type: 1,
                title: "编辑友情链接",
                content: edit_str,
                area: ['450px', '400px'],
            });
            form.val("editForm", {
                linkname: linkname,
                linkurl: linkurl,
                linkdesc: linkdesc,
            });
            // console.log($(this).attr("linkicon"));
            let src = "http://127.0.0.1:8888/uploads/" + $(this).attr("linkicon");
            $("#preIcon").attr("src", src);
            // ----------------------------------------------------------------------------------

            $("#urlIcon").on("click", function () {
                $("#linkFile").click();
            });



            $("#edit-form").on("submit", function (e) {
                e.preventDefault();
                let fd = new FormData(this);
                fd.append("linkicon", $("#linkFile")[0].files[0])
                fd.forEach(function (a, b) {
                    console.log(a, b);
                })

                $.ajax({
                    url: "/admin/links/" + id,
                    type: "PUT",
                    data: fd,
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        layer.msg(res.message)
                        getList()
                        layer.close(index);
                    }
                });
            })

        })

        // *********************************************************添加友情链接
        let add_str = `
<form id="add-form" class="layui-form" style="margin: 15px 30px 0 0">
    <!-- 第一行：密码 -->
    <div class="layui-form-item">
      <label class="layui-form-label">链接名称</label>
      <div class="layui-input-block">
        <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
      </div>
    </div>
    <!-- 第二行：确认密码 -->
    <div class="layui-form-item">
      <label class="layui-form-label">链接地址</label>
      <div class="layui-input-block">
        <input type="text" name="linkurl" required lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
      </div>
    </div>
    <!-- 第三行：链接描述 -->
    <div class="layui-form-item">
      <label class="layui-form-label">链接描述</label>
      <div class="layui-input-block">
        <input type="text" name="linkdesc" required lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
      </div>
    </div>
    <!-- 第四行：上传图片 -->
    <div class="layui-form-item">
      <div class="layui-input-block icon-url">
        <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
          <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <input type="file" name="linkicon" id="linkFile" style="display: none;">
        <img id="preIcon" src="">
      </div>
    </div>
    <!-- 第三行：按钮 -->
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>`

        $("#add-link").on("click", function () {
            // e.preventDefault()

            // let linkname = $(this).attr("linkname");
            // let linkurl = $(this).attr("linkurl");
            // let linkdesc = $(this).attr("linkdesc");
            // let id = $(this).attr("id");

            let index = layer.open({
                type: 1,
                title: "添加友情链接",
                content: add_str,
                area: ['450px', '400px'],
            });
            // form.val("editForm", {
            //     linkname: linkname,
            //     linkurl: linkurl,
            //     linkdesc: linkdesc,
            // });

            // ----------------------------------------------------------------------------------

            // 基于jq；后面cropper方法因为插件JS导致
            $('#preIcon').cropper({
                // 纵横比(宽高比)
                aspectRatio: 1 / 1, // 正方形
                // 指定预览区域
                preview: '.img-preview' // 指定预览区的类名（选择器）
            });
            // 原有选择文件按钮 样式不好看，修改不了！隐藏起来！
            // 点击样式设置好的那个按钮，触发原来按钮
            $("#urlIcon").on("click", function () {
                $("#linkFile").click(); // JS代码模拟点击行为
            })
            // 选择完图片后，打开文件。获取到选择这个文件信息，设置给img;
            // 表单：change 
            $("#linkFile").on("change", function () {
                // 1.拿到图片信息
                let obj = this.files[0];
                // 2.需要把图片对象 转换为  临时图片地址
                let src = URL.createObjectURL(obj);
                // 3. 设置给 img；主要原因：$('#image')已经经过cropper插件处理 JQ对象；
                $('#preIcon').cropper("replace", src);
            });



            $('#add-form').on('submit', function (e) {
                e.preventDefault()

                // 1.把图片转化为Base64图片流
                //      前面：没有任何插件一个 图片信息转换为Base64图片流
                //      现在：$('#image')已经被插件处理，获取Base64图片流方法使用插件提供
                let canvas = $('#preIcon').cropper('getCroppedCanvas', {
                    width: 100,
                    height: 100
                });
                let base64 = canvas.toDataURL('image/png');
                let fd = new FormData(this)
                // let data = $(this).serialize()
                $.ajax({
                    url: '/admin/links',
                    type: 'post',
                    data: fd,
                    success: function (res) {
                        layer.msg(res.message)
                        getList()
                        layer.close(index);
                    },
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                })
            })





        })

    });








})